.tab-ports {
	table {
		border-collapse: collapse;
		border-left: 0;
		border-right: 0;
		border-top: 0;
		td {
			padding: 0.25rem;
			text-align: center;
            &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors {
                select {
                    margin-left: 0.5rem;
                }
            }
		}
		tr {
			td {
                padding: 0.5rem 0;
				background-color: var(--surface-200);
				&:first-child {
					text-align: left;
                    padding-left: 1rem
				}
			}
			&:nth-child(even) {
				select {
					background-color: var(--surface-300);
				}
			}
		}
		select[name=function-peripherals] {
			max-width: 12rem;
		}
		select[name=function-telemetry] {
			max-width: 10rem;
		}
		thead {
			td {
				padding: 0.5rem;
				background-color: var(--surface-300);
				color: var(--text);
				&:first-child {
					border-top-left-radius: 0.75rem;
				}
				&:last-child {
					border-top-right-radius: 0.75rem;
				}
			}
		}
        tbody {
            // first and last td of last tr
            tr:last-child td:first-child {
                border-bottom-left-radius: 0.75rem;
            }
            tr:last-child td:last-child {
                border-bottom-right-radius: 0.75rem;
            }
            td {
				*:first-child {
					margin-bottom: 0.25rem;
				}
            }
        }
	}
}
#tab-ports-templates {
	display: none;
}
.tab-ports.supported {
	.require-support {
		display: block;
	}
	.require-upgrade {
		display: none;
	}
}
@media only screen and (max-width: 1055px) {
	.tab-ports {
		table {
			thead {
				tr {
					&:first-child {
						font-size: 12px;
						height: 22px;
					}
				}
			}
		}
	}
}
@media only screen and (max-device-width: 1055px) {
	.tab-ports {
		table {
			thead {
				tr {
					&:first-child {
						font-size: 12px;
						height: 22px;
					}
				}
			}
		}
	}
}
@media all and (max-width: 575px) {
	.tab-ports {
		.config {
			text-align: left;
			border-top-left-radius: 5px;
			border-left: 0;
		}
		table {
			td {
				padding: 0;
			}
		}
		.ports {
			select {
				margin: 0;
				width: 100%;
				border: none;
				height: 25px;
				border-radius: unset;
			}
			select[name=function-peripherals] {
				border-bottom: 1px solid var(--surface-500);
			}
			select[name=function-telemetry] {
				border-bottom: 1px solid var(--surface-500);
			}
			select[name=function-sensors] {
				border-bottom: 1px solid var(--surface-500);
			}
			thead {
				td {
                    font-size: 10px;
					width: fit-content;
                    padding: 0.5rem;
					word-break: break-word;
					white-space: unset;
				}
			}
            tbody {
                td {
                    padding: 0.25rem 0.5rem;
                    .switchery-default {
                        margin-bottom: 0.5rem;
                    }
                    &.functionsCell-configuration, &.functionsCell-telemetry, &.functionsCell-peripherals, &.functionsCell-sensors {
                        select {
                            margin-left: 0rem;
                        }
                    }
                }
                // alternate row and its identifier background color
                tr:nth-child(4n) {
                    td {
                        background-color: var(--surface-300);
                    }
                }
                tr:nth-child(4n + 1) {
                    td {
                        background-color: var(--surface-200);
                    }
                }
            }
		}
		.portIdentifier {
			td {
				font-size: 12px;
				color: var(--text);
				font-weight: normal;
                background-color: var(--surface-300);
			}
		}
	}
}
